<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Porcupine</title>
    <style>
      %s
    </style>
  </head>
  <body>
    <div id="legend">
      <svg xmlns="http://www.w3.org/2000/svg" width="660" height="20">
        <text x="0" y="10">Clients</text>
        <line x1="50" y1="0" x2="70" y2="20" stroke="#000" stroke-width="1"></line>
        <text x="70" y="10">Time</text>
        <line x1="110" y1="10" x2="200" y2="10" stroke="#000" stroke-width="2"></line>
        <polygon points="200,5 200,15, 210,10" fill="#000"></polygon>
        <rect x="300" y="5" width="10" height="10" fill="rgba(0, 0, 0, 0.5)"></rect>
        <text x="315" y="10">Valid LP</text>
        <rect x="400" y="5" width="10" height="10" fill="rgba(255, 0, 0, 0.5)"></rect>
        <text x="415" y="10">Invalid LP</text>
        <text x="520" y="10" id="jump-link" class="link">[ jump to first error ]</text>
      </svg>
    </div>
    <div id="canvas"></div>
    <div id="calc"></div>
    <script>
      %s

      const data = %s

      render(data)
    </script>
  </body>
</html>
